<template>
  <div class="run">
    <div id="container"></div>
    <nut-drag direction="y">
      <div :class="show === true ? 'content' : 'content2'">
        <span class="title">户外跑</span>
        <span class="number">0.00</span>
        <p class="gl">公里</p>
        <div class="cont">
          <div class="c1">
            <p>--</p>
            <p>配速</p>
          </div>
          <div class="c2">
            <p>{{ num4 }}{{ num3 }}:{{ num2 }}{{ num1 }}</p>
            <p>用时</p>
          </div>
          <div class="c3">
            <p>0</p>
            <p>千卡</p>
          </div>
        </div>
        <div class="zanting" v-if="show" @click="stopjishi">
          <div></div>
          <svg
            t="1690438488055"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2519"
            width="41"
            height="41"
          >
            <path
              d="M446.326154 689.230769a39.384615 39.384615 0 0 1-78.769231 0V334.769231a39.384615 39.384615 0 0 1 78.769231 0z m210.116923 0a39.384615 39.384615 0 0 1-78.769231 0V334.769231a39.384615 39.384615 0 0 1 78.769231 0z"
              p-id="2520"
            ></path>
          </svg>
          <p style="color: black">暂停</p>
        </div>
        <div v-show="!show">
          <div class="kaishi" @click="startrun">
            <div style="marginleft: 5px">
              <svg
                t="1690510680424"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2467"
                width="30"
                height="30"
              >
                <path
                  d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
                  fill="#ffffff"
                  p-id="2468"
                ></path>
              </svg>
            </div>
          </div>
          <div></div>
          <div class="jieshu" @touchstart="down" @touchend="up">
            <svg
              t="1690510825121"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6142"
              width="20"
              height="20"
            >
              <path
                d="M1024 127.937531v767.625183c0 70.665495-57.272035 127.937531-127.937531 127.93753h-767.625183c-70.665495 0-127.937531-57.272035-127.93753-127.93753v-767.625183c0-70.665495 57.272035-127.937531 127.93753-127.937531h767.625183c70.665495 0 127.937531 57.272035 127.937531 127.937531z"
                p-id="6143"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
        </div>
        <div class="nuv_left">
          <div class="xuanzhuan" @click="GoToVideo"></div>
          一起跑
        </div>
      </div>
    </nut-drag>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

//   var map = new AMap.Map('container');

let num1 = ref(0);
let num2 = ref(0);
let num3 = ref(0);
let num4 = ref(0);
let show = ref(true);
let timer = null
const router = useRouter();

onMounted(() => {
  startjishi();
  var map = new AMap.Map("container", {
    zoom: 11, //级别
    center: [116.397428, 39.90923], //中心点坐标
    viewMode: "3D", //使用3D视图
  });
  // openVideo()
});

//开始跑步
const startrun = () =>{

 setTimeout(() => {
    show.value = true
 }, 100);
}

const down = () =>{
 timer = setTimeout(() => {
  console.log('长按！');
}, 3000);
}

const up = () =>{
  
  clearTimeout(timer)

}

//计时效果
const startjishi = () => {
  let a = setInterval(() => {
    if (show.value === true) {
      num1.value++;
    }

    if (num1.value === 10) {
      num1.value = 0;
      num2.value += 1;
    }
    if (num2.value === 6) {
      num2.value = 0;
      num3.value += 1;
    }
    if (num3.value === 10) {
      num3.value = 0;
      num4.value += 1;
    }
  }, 1000);
};

const GoToVideo = () => {
  router.push("/video");
};

const stopjishi = () => {
  setTimeout(() => {
    show.value = false;
  }, 100);
};
</script>

<style lang="less" scoped>
.run {
  width: 100%;
  height: 97vh;
  #container {
    width: 100%;
    height: 100%;
  }
  .content2 {
    color: rgb(192, 189, 195);
    text-align: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 1000px;
    width: 100vw;
    background-color: rgb(71, 63, 78);
    position: absolute;
    top: -100px;
    .nuv_left {
      height: 40px;
      width: 120px;
      position: absolute;
      line-height: 40px;
      font-size: 15px;
      right: -0px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgb(48, 43, 45);
      top: 80px;
      color: rgb(192, 189, 195);
      .xuanzhuan {
        margin-left: 8%;
        margin-top: 6px;
        float: left;
        width: 15px;
        height: 15px;
        border: 6px solid white;
        border-top-color: pink;
        border-radius: 50%;
        animation: xuanzhuan 3s infinite;
      }
      @keyframes xuanzhuan {
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .title {
      color: white;
      float: left;
      font-size: 18px;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin-left: 5%;
      display: inline-block;
      margin-top: 7%;
    }
    .number {
      margin-top: 50%;
      // margin-left: 15%;
      margin-right: 15%;
      font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
        "Lucida Sans", Arial, sans-serif;
      display: inline-block;
      font-size: 75px;
    }
    .zanting {
      height: 80px;
      width: 80px;
      background: white;
      display: inline-block;
      border-radius: 100px;
      transition: 0.3s all;
      margin-top: 10%;
    }
    .kaishi {
      line-height: 90px;
      text-align: center;
      margin-left: 31%;
      float: left;
      height: 70px;
      width: 70px;
      background: rgb(2, 200, 125);
      display: inline-block;
      border-radius: 100px;
      transition: 0.25s all;
      margin-top: 15%;
    }
    .kaishi:active {
      transform: scale(1.2);
    }
    .jieshu {
      text-align: center;
      line-height: 75px;
      margin-left: 3%;
      float: left;
      height: 70px;
      width: 70px;
      background: rgb(254, 87, 79);
      display: inline-block;
      border-radius: 100px;
      transition: 0.3s all;
      margin-top: 15%;
    }
    .zanting:active {
      transform: scale(1.25);
    }
    .gl {
      // margin-left: 46%;
    }
    .cont {
      display: flex;
      width: 100%;
      height: 100px;
      //   background-color: red;
      margin-top: 80px;
      .c1 {
        width: 25%;
        font-size: 30px;

        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
        // background-color: red;
      }
      .c2 {
        width: 50%;
        font-size: 30px;
        // color: rgb(192, 189, 195);
        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
        // background-color: royalblue;
      }
      .c3 {
        width: 25%;
        font-size: 30px;
        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
      }
    }
  }
  .content {
    color: white;
    text-align: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 1000px;
    width: 100vw;
    background-color: rgb(71, 63, 78);
    position: absolute;
    top: -100px;
    .nuv_left {
      height: 40px;
      width: 120px;
      position: absolute;
      line-height: 40px;
      font-size: 15px;
      right: -0px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgb(48, 43, 45);
      top: 80px;
      color: rgb(192, 189, 195);
      .xuanzhuan {
        margin-left: 8%;
        margin-top: 6px;
        float: left;
        width: 15px;
        height: 15px;
        border: 6px solid white;
        border-top-color: pink;
        border-radius: 50%;
        animation: xuanzhuan 3s infinite;
      }
      @keyframes xuanzhuan {
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .title {
      float: left;
      font-size: 18px;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin-left: 5%;
      display: inline-block;
      margin-top: 7%;
    }
    .number {
      margin-top: 50%;
      // margin-left: 15%;
      margin-right: 15%;
      font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
        "Lucida Sans", Arial, sans-serif;
      display: inline-block;

      font-size: 75px;
    }
    .zanting {
      // line-height: 80px;
      // text-align:left;
      height: 80px;
      width: 80px;
      background: white;
      // margin-left: 35%;
      display: inline-block;
      border-radius: 100px;
      transition: 0.25s all;
      margin-top: 15%;
    }
    .zanting:active {
      transform: scale(1.25);
    }
    .gl {
      // margin-left: 46%;
    }
    .cont {
      display: flex;
      width: 100%;
      height: 100px;
      //   background-color: red;
      margin-top: 80px;
      .c1 {
        width: 25%;
        font-size: 30px;

        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
        // background-color: red;
      }
      .c2 {
        width: 50%;
        font-size: 30px;
        // color: rgb(192, 189, 195);
        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
        // background-color: royalblue;
      }
      .c3 {
        width: 25%;
        font-size: 30px;
        text-align: center;
        height: 100%;
        line-height: 50px;
        p:nth-child(2) {
          font-size: 20px;
        }
      }
    }
  }
}
</style>